<template xmlns="http://www.w3.org/1999/html">
  <div class="main" style="backgroundColor: #767171">
    <div class="data-left">
      <div>{{testint}}</div>
      <span>{{title}}</span></br>
      <div v-for="(val, key, index) in opc" class="block">{{index + 1}}.{{key}}：{{val}}</div>
    </div>
  </div>
</template>

<script>
  import TpScroll from '../assets/js/tp-scroll.js';
  import { apiGet, apiPost, apiDelete, path } from '../api/api'
  export default {
    name: "",
    data() {
      return {
        url: "",
        e2c: {},
        opc: {},
        title: "测试111111",
        style_srt1: "#FFFFFF",
        bgColor: "",
        timer:null,
        testint: 0
      }
    },
    created(){
      TpScroll.RemoveScroll();

    },
    beforeDestroy(){
      clearInterval(this.timer);
      this.timer = null;
    },
    mounted(){
      // console.log(this.$route);
      let getUrl = window.location.href;
      this.url = getUrl;
      // console.log(this.url);

      // SYNCB5.DCS1_SO2=SYNCB5.DCS1_SO2&SYNCB5.DCS1_NOX=SYNCB5.DCS1_NOX&SYNCB5.DCS1_FC=SYNCB5.DCS1_FC
      this.splitUrlParam();

      // self.setInterval("getOpcData()",1000)

      this.getOpcData()
      this.setTime();
    },
    methods:{
      splitUrlParam(){
      console.log(this.url)
        // let map = {}
        var paramInfo = this.url.split("showData?")[1];
        var kvList = paramInfo.split("amp");
        //this.bgColor = kvList[0].split("%3D")[1];
        // console.log("bgColor",this.bgColor)
        //if(this.bgColor.length == 6){
        //  this.style_srt1 = "#" + this.bgColor
        //}
        // console.log("ss",this.e2c)
        // console.log("e2c",kvList.slice(1, kvList.length))
        // kvList.slice(1, kvList.length).forEach(function (v, k){
          // var itemk = v.split("=")[0];
          // var itemv = v.split("=")[1];
          // this.$set(this.e2c,itemk,itemv)
          // that.e2c[itemk]= itemv
        // })
        console.log(kvList);
        //console.log(kvList instanceof Array);
        //console.log( Array.isArray(kvList));
        for(var i = 0; i< kvList.length;i++){
          //this.title =  this.url;
          var itemk = kvList[i].split("%3D")[0];
          var itemv = kvList[i].split("%3D")[1];
          //this.title = i;
          this.$set(this.e2c,itemk,itemv);
        }
        //for( let key in kvList){
         // this.title = kvList;
          //var itemk = kvList[key].split("=")[0];
          //var itemv = kvList[key].split("=")[1];
          // this.$set(this.e2c,itemk,itemv);
          //this.e2c[itemk]= itemv
        //}

        // this.e2c = map;
        // console.log("e2c",this.e2c)
        // var urlParams = this.$route.query;
        // this.title = urlParams['title']
        // var bgcolor = urlParams['bgColor']
        // delete urlParams['title']
        // delete urlParams['bgColor']
        // this.e2c = urlParams;
        // console.log(urlParams)
      },
      async getOpcData(){
        var keyList = [];
        for (let key in this.e2c){
          keyList.push(key)
        };
        // console.log("keyList:",keyList);
        const data = await apiPost(
          path.getOpcData,
          JSON.stringify({
          "itemCodes":keyList
        }) , '', '')

          // console.log(data)
        if (data.result == 'SUCCESS') {
          for (let key in data.data){
            let opcCnName = data.data[key].cnName
            // console.log(opcCnName)
            // this.opc[opcCnName] = data.data[key].value
            this.$set(this.opc,opcCnName,data.data[key].value)
          }
          if(data.data.length!==0){
            if(data.data[0].hasOwnProperty("title")){
              this.title = data.data[0].title
            }
          }
        }
        else {
          this.$message.error(data.message)
        }
          // console.log(this.opc)
      },
      setTime(){
        this.timer = setInterval(()=>{
          this.testint += 1;
          this.getOpcData();
        }, 1000)
      }
    }
    // http://192.168.3.13:8087/#/showData?title=""&bgColor=""&so2=%E4%BA%8C%E6%B0%A7%E5%8C%96%E7%A1%AB&co2=%E4%BA%8C%E6%B0%A7%E5%8C%96%E7%A2%B3&o2=%E6%B0%A7%E6%B0%94
// http://192.168.3.13:8087/#/showData?title=开始&bgColor=black&so2=二氧化硫&co2=二&o2=111
  }
</script>

<style scoped>
  ::-webkit-scrollbar{display:none}
  .main{
    height: 100%;
    display:flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0px;
    overflow: hidden;
    color: #000000
  }
  .data-left{
    /*width: 100%;*/
    font-size: 350px;
  }
  .data-mid{
    width: 59%;
    text-align: center;
  }
  .data-right{
    width: 20%;
  }
  .title{
    font-size: 20px;
  }
  .block{
    display: block;
  }
</style>


